<template>
  <div class="chart_main">
    <div v-show="state.option.show" ref="pieChart"></div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref, defineProps, reactive, computed, watch} from "vue";
import * as echarts from "echarts";
import {copyDefinedProperties} from "../../../../utils/copy.ts"
defineOptions({
  name: 'PieCircle'
})
const props = defineProps(['option']);
const pieChart=ref(null)
const state = reactive({
  option:{
    height:200,
    width:300,
    left:0,
    top:0,
    show:true,
    textStyle: {
      color:"#56B9F8",
      fontSize: 30
    },
    dataColor:[
      {
        color: "#03a9f4",
        shadowColor:"#97e2f5"
      },
      {
        color: "#00bcd44a",
        shadowColor:"#00bcd44a"
      }
    ],
  },
  window:{
    height:1700,
    width:800,
  }
});
watch(()=>props.option,(newValue,oldValue)=>{
  // console.log('workOrder变化了',newValue,oldValue)
  setting()
},{immediate:true,deep:true})
onMounted(()=>{
  setting()
  initChart()
})
function setting(){
  if(props.option!==undefined){
    copyDefinedProperties(props.option,state.option)
    state.window={
      width: document.body.clientWidth,
      height: document.body.clientHeight
    }
  }
}
let epiechart
let canvas
const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
window.addEventListener('resize',()=>{
  // console.log("width,height",document.body.clientWidth,document.body.clientHeight)
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
  epiechart.resize(getChartSize())
})
function getChartSize(){
  return{
    width:(state.option.width/100)*state.window.width,
    height:(state.option.height/100)*state.window.height
  }
}
function initChart(){

  epiechart=echarts.init(pieChart.value,null,getChartSize())
  //修改样式(防止被挡)
  canvas=epiechart.getZr().dom
  canvas.style.zIndex=9999
  // canvas.style.position="absolute"
  // canvas.style.top=`${state.option.top}px`
  // canvas.style.left=`${state.option.left}px`
  SetOption(0)
}
function SetOption(data){
  if(epiechart!==undefined){
    epiechart.setOption({
      tooltip: {
        show: true,
        trigger: 'item'
      },
      legend: {
        show: true,
      },
      dataset: 0.25,
      title: {
        text: data + "%",
        x: "center",
        y: "center",
        textStyle: state.option.textStyle
      },
      series: [
        {
          type: "pie",
          radius: ["75%", "80%"],
          center: ["50%", "50%"],
          hoverAnimation: true,
          color: ["#00bcd44a", "transparent"],
          label: {
            show: false
          },
          data: [
            {
              value: [data],
              itemStyle: {
                color: state.option.dataColor[0].color,
                shadowBlur: 10,
                shadowColor:state.option.dataColor[0].shadowColor
              }
            },
            {
              value: [100-data],
              itemStyle: {
                color: state.option.dataColor[1].color,
                shadowBlur: 0,
                shadowColor:state.option.dataColor[1].shadowColor
              }
            }
          ]
        },
      ]
    });
  }
}
defineExpose({SetOption})
</script>

<style scoped>
.chart_main{
  position: absolute;
  left:v-bind(left);
  top:v-bind(top);
}
</style>
